import { StyleSheet, View, Text } from 'react-native'
import React, { useEffect, useState } from 'react'
import {
  Center, Box, Heading, ScrollView, Pressable, HStack,
  Avatar, Spacer, VStack, Icon, Entypo, MaterialIcons
} from 'native-base'
import { SwipeListView } from 'react-native-swipe-list-view';
import { connect } from 'react-redux'
import { getDomain } from '../../utils/tools';

function Message(props) {
  const { navigation, msgList } = props
  useEffect(() => {
    console.log('msgList', msgList)
  }, [])
  const [mode, setMode] = useState('Basic');
  const [listData, setListData] = useState(msgList);

  useEffect(() => {
    setListData(msgList)
  }, [msgList])

  const to = (data) => {
    console.log(data)
    const { _id: id, nickname: name } = data
    navigation.navigate('ChatWindow', { id, name })
  }

  const onRowDidOpen = rowKey => {
    console.log('This row opened', rowKey);
  };

  const renderItem = ({
    item,
    index
  }) => <Box style={styles.itemBox}>
      <Pressable onPress={() => to(item.friend)} _dark={{
        bg: 'coolGray.800'
      }} _light={{
        // bg: 'white'
      }}>
        <Box py="2">
          <HStack alignItems="center">
            {
              item.unreadMsgNum > 0 && <Text style={styles.badge}>{item.unreadMsgNum}</Text>
            }
            <Avatar style={{ marginRight: 5 }} size="48px" source={{
              uri: getDomain(item.friend.avatar)
            }} >
              {
                item.unreadMsgNum > 0 && <Avatar.Badge bg="red.500"></Avatar.Badge>
              }
            </Avatar>
            <VStack>
              <Text color="coolGray.800" _dark={{
                color: 'warmGray.50'
              }} bold style={{ color: 'black', marginBottom: 5 }}>
                {item.friend.nickname}
              </Text>
              <Text style={{ width: 300, fontSize: 12 }} numberOfLines={1} ellipsizeMode="tail" color="coolGray.600" _dark={{
                color: 'warmGray.200'
              }}>
                {item.content}
              </Text>
            </VStack>
            <Spacer />
            <Text fontSize="xs" color="coolGray.800" _dark={{
              color: 'warmGray.50'
            }} alignSelf="flex-start">
              {item.timeStamp}
            </Text>
          </HStack>
        </Box>
      </Pressable>
    </Box>


  return (
    <View style={styles.container}>
      {/* <Text>{props.msgList[0].content}</Text> */}
      {/* <Center h="290px"> */}
      <Box _dark={{
        bg: 'coolGray.800'
      }} _light={{
        bg: 'white'
      }} flex="1" safeAreaTop w="100%">
        <Box bg="white" safeArea flex="1">
          <SwipeListView data={listData} renderItem={renderItem}
            rightOpenValue={-130}
            previewRowKey={'0'} previewOpenValue={-40} previewOpenDelay={3000}
            onRowDidOpen={onRowDidOpen} />
        </Box>;
      </Box>
      {/* </Center> */}
    </View>
  )
}

export default connect((state) => {
  return {
    msgList: state.chatReducer.msgList
  }
})(Message)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red'
  },
  itemBox: {
    paddingHorizontal: 5
  },
  badge: {
    position: 'absolute',
    right: 0,
    backgroundColor: 'red',
    // width: 20,
    // height: 20,
    // borderRadius: 10,
    paddingHorizontal: 5,
    borderRadius: 2,
    color: 'white'
  }
})